<template>
  <div id="app">
    <!-- 标题栏 -->
    <div class="header">
      <div class="title-bar">
      <div class="back-arrow">
        <svg 
        t="1747792003449" 
        class="icon" 
        viewBox="0 0 1024 1024" 
        version="1.1" 
        xmlns="http://www.w3.org/2000/svg" 
        width="25.5" 
        height="25.5"
        @click="goBack"
      >
        <path d="M658.24 210.304H292.544V64L0 283.456l292.544 219.456V356.544H658.24c124.352 0 219.52 95.04 219.52 219.456s-95.104 219.456-219.52 219.456H292.544V941.76H658.24C855.744 941.76 1024 780.8 1024 576S863.104 210.304 658.24 210.304z" 
        fill="#2c2c2c"
      ></path>
      </svg>
      </div>
    </div>
      <h1>我的积分：{{ points }}分</h1>
    </div>
    
    <!-- 选项卡 -->
    <div class="tabs">
      <div class="tab active" @click="activeTab = 'records'">积分记录</div>
      <div class="tab" @click="activeTab = 'rules'">积分规则</div>
    </div>
    
    <!-- 积分记录内容 -->
    <div v-if="activeTab === 'records'" class="points-records">
      <div
        class="record-item"
        v-for="record in pointsRecords"
        :key="record.id"
      >
        <div class="record-date">{{ record.date }}</div>
        <div class="record-action">{{ record.action }}</div>
        <div class="record-points">{{ record.points }}</div>
      </div>
    </div>
    
    <!-- 积分规则内容 -->
    <div v-if="activeTab === 'rules'" class="points-rules">
      <!-- <div class="rule-item" v-for="rule in pointsRules" :key="rule.id">
        {{ rule.description }}
      </div> -->
      <div class="rule-text">
        <p>进餐打卡、浏览营养教育、后台留言等均可获得相应积分，积分可以兑换微信红包，100 积分=1 元。工作人员会定期联系您兑换红包或等值礼品。</p>
        <p>1. 每次有效饮食打卡可获得10积分。</p>
        <p>2. 浏览营养教育：同一条营养教育信息，第一次浏览5分钟以上可获得5积分；第二次浏览3分钟以上可获得3积分；第三次及以上可获得2积分（不限时）。</p>
        <p>3. 每提交有效留言1条可获得10积分（限100积分以内）。</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'PointsRecords',
  setup() {
    // 积分数据
    const points = ref(112);
    
    // 积分记录
    const pointsRecords = ref([
      { id: 1, date: '2025.10.1 8:03', action: '早餐打卡', points: '+10' },
      { id: 2, date: '2025.10.1 12:05', action: '午餐打卡', points: '+10' },
      { id: 3, date: '2025.10.1 13:01', action: '营养教育', points: '+5' },
      { id: 4, date: '2025.10.2 7:43', action: '早餐打卡', points: '+10' },
      { id: 5, date: '2025.10.2 13:03', action: '午餐打卡', points: '+10' },
      { id: 6, date: '2025.10.2 18:03', action: '晚餐打卡', points: '+10' },
      { id: 7, date: '2025.10.2 20:03', action: '营养教育', points: '+10' }
    ]);
    
    // 积分规则
    const pointsRules = ref([
      { id: 1, description: '早餐打卡：+10分/次' },
      { id: 2, description: '午餐打卡：+10分/次' },
      { id: 3, description: '晚餐打卡：+10分/次' },
      { id: 4, description: '营养教育：+5分/次' },
      { id: 5, description: '连续打卡7天：额外+30分' }
    ]);
    
    // 选项卡状态
    const activeTab = ref('records');
    
    // 返回按钮点击事件
    const goBack = () => {
      window.history.back();
    };
    
    return {
      points,
      pointsRecords,
      pointsRules,
      activeTab,
      goBack
    };
  }
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: #2c3e50;
  padding: 0;
  margin: 0;
  background-color: white;
}

/* 标题栏样式 */
.header {
  background-color: #ffcc00;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-button {
  display: flex;
  align-items: center;
  color: #333;
  cursor: pointer;
}

.arrow {
  font-size: 20px;
  margin-right: 5px;
}

.back-text {
  font-size: 16px;
}

.header h1 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

/* 选项卡样式 */
.tabs {
  display: flex;
  background-color: #f0f0f0;
}

.tab {
  flex: 1;
  padding: 15px;
  text-align: center;
  cursor: pointer;
  background-color: #f0f0f0;
}

.tab.active {
  background-color: #90ee90;
  font-weight: bold;
}

/* 积分记录样式 */
.points-records {
  padding: 15px;
}

.record-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #e0f0e0;
  margin-bottom: 10px;
  border-radius: 5px;
}

.record-date {
  flex: 1;
}

.record-action {
  flex: 2;
}

.record-points {
  flex: 1;
  text-align: right;
  color: #33cc33;
  font-weight: bold;
}

/* 积分规则样式 */
.points-rules {
  padding: 15px;
}

.rule-item {
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
  border-radius: 5px;
}

.title-bar {
  display: flex;
  align-items: center;
  padding: 15px;
}

.back-arrow {
  margin-right: 10px;
}

</style>